﻿<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="NewProduct.ascx.cs" Inherits="smartphone.UserControls.NewProduct" %>

<script src="../Scripts/carouFredSel/jquery.carouFredSel-6.1.0.js"></script>
<script src="../Scripts/carouFredSel/helper-plugins/jquery.ba-throttle-debounce.min.js"></script>
<script src="../Scripts/carouFredSel/helper-plugins/jquery.mousewheel.min.js"></script>
<script src="../Scripts/carouFredSel/helper-plugins/jquery.touchSwipe.min.js"></script>

<style type="text/css">
    .caroufredsel_wrapper{
            width: 960px;
            margin: 0 auto;
        }
    .list_carousel {
        width: 960px;
        padding: 10px;
    }
    .list_carousel ul {
            margin: 0;
            padding: 0;
            list-style: none;
            display: block;
    }
    .list_carousel li {
            color: #999;
            text-align: center;
            padding: 0;
            margin: 6px;
            display: block;
            float: left;
            width: 223px;
            height: 250px;
    }
    .list_carousel.responsive {
            width: auto;
            margin-left: 0;
    }
    .clearfix {
            float: none;
            clear: both;
    }
    .prev {
            float: left;
            margin-left: 10px;
    }
    .next {
            float: right;
            margin-right: 10px;
    }
    .pager {
            float: right;
            width: 180px;
            text-align: center;
            display: block;
             margin-right: -29px;
            margin-top: -25px;
        }
                
    .pager a {
            margin: 0 2px;
            text-decoration: none;
            background: url("Styles/Images/arrow-button.png") no-repeat left top;
            cursor: pointer;
            display: inline-block;
            height: 17px;
/*                    margin: 13px 3px;*/
            position: relative;
            text-align: left;
            text-indent: -9999px;
            width: 17px;
    }
    .pager a.selected {
            background: url("Styles/Images/arrow-button.png") no-repeat left bottom;
    }

    .new-product-items-list li{
        color: #999999;
        display: block;
        float: left;
        height: 250px;
        margin: 6px 10px 6px 23px;
        padding: 0;
        text-align: left;
        width: 207px;
    }

        .new-product-items-list li .product-listing-tile {
            float: left;
        }

        .new-product-items-list li .product-listing-description {
            clear: both;
        }

        .new-product-items-list li .product-new-icon {
             padding-left: 5px;
            padding-top: 4px;
        }

</style>

<span class="headerTemplate">
    Sản phẩm mới
</span>

<div id="pager2" class="pager"></div>

<ul class="new-product-items-list">
    <asp:Repeater ID="RpProductsList" runat="server" OnItemDataBound="RpProductsList_ItemDataBound">
        <ItemTemplate>
            <li class= "product-item" id="product-new">
                <a class="product-listing-image" href="<%# smartphone.App_Code.LinkClass.ToProductDetail(Eval("maSanPham").ToString()) %>">
                    <img src="<%# smartphone.App_Code.LinkClass.ToProductImage(Eval("hinhDaiDien").ToString()) %>" 
                        width="185" height="125" alt='<%# HttpUtility.HtmlEncode(Eval("tenSanPham")) %>'/>
                </a>
        
                <h5 class="product-listing-tile">
                    <a href="<%# smartphone.App_Code.LinkClass.ToProductDetail(Eval("maSanPham").ToString()) %>">
                        <%# HttpUtility.HtmlEncode(Eval("tenSanPham")) %>
                    </a>
                </h5>
                    <img class="product-new-icon" src="../Styles/Images/new_icons.gif" />
                <p class="product-listing-description">
                    <%# (Eval("moTa")) %>
                </p>
                
                    <%--thuoc tinh cua san pham--%>
                <span class="attrBlock">
                    <asp:PlaceHolder ID="attrPlaceHolder" runat="server"></asp:PlaceHolder>
                </span>

                <span class="product-listing-price">
                    <%# Eval("donGia", "{0:0,000}") + " vnđ" %>
                </span>

                <asp:LinkButton ID="LinkAddToCart" CssClass="add-to-cart" runat="server" CommandArgument='<%#Eval("maSanPham") %>' OnClick="LinkAddToCart_Click" CausesValidation="false">Giỏ hàng</asp:LinkButton>
                <asp:Label CssClass="labelDeal" ID="LabelDeal" runat="server" Text="Khuyến mại" Visible="false"></asp:Label>
            </li>
        </ItemTemplate>
    </asp:Repeater>
</ul>

<script type="text/javascript">
    $(function () {
        $('.new-product-items-list').carouFredSel({
            auto: false,
            //                    prev: '#prev2',
            //                    next: '#next2',
            pagination: "#pager2"
            //                    mousewheel: true,
            //                    swipe: {
            //                        onMouse: true,
            //                        onTouch: true
            //                    }
        });
    });
</script>